<template>
	<div class="scroll-container" ref="scrollContainer">
		<div v-for="(item, index) in deviceLogList" :key="item.deviceCode" class="log-item">
			<span class="item-index">{{ index + 1 }}</span>
			<div class="item-details">
				<div class="detail-field">
					<span>{{ $t('message.mainStationComprehensiveNews.pageSubstation') }}：</span>
					<span class="highlight">{{ item.deviceName }}</span>
				</div>

				<div class="detail-field cpu-field">
					<span>{{ $t('message.mainStationComprehensiveNews.pageStatus') }}：</span>
					<span class="cpu-value" :style="getCpuColorStyle(item.deviceName)"> {{ item.deviceName }} </span>
				</div>

				<div class="detail-field">
					<span>{{ $t('message.mainStationComprehensiveNews.pagePowerTable') }}：</span>
					<span class="text-white">{{ item.deviceName }}</span>
				</div>

				<div class="detail-field">
					<span>{{ $t('message.mainStationComprehensiveNews.pageWatt') }}：</span>
					<span class="text-white">{{ item.deviceName }}</span>
				</div>

				<div class="detail-field">
					<span>{{ $t('message.mainStationComprehensiveNews.pageOperating') }}：</span>
					<span class="text-white">{{ item.deviceName }}</span>
				</div>

				<div class="detail-field">
					<span>{{ $t('message.mainStationComprehensiveNews.pageDailyGeneration') }}：</span>
					<span class="text-white">{{ item.deviceName }}</span>
				</div>

				<div class="detail-field">
					<span>{{ $t('message.mainStationComprehensiveNews.pageTotalGeneration') }}：</span>
					<span class="text-white">{{ item.deviceName }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const deviceLogList = ref([
	{ deviceName: '测试' },
	{ deviceName: '测试' },
	{ deviceName: '测试' },
	{ deviceName: '测试' },
	{ deviceName: '测试' },
	{ deviceName: '测试' },
]);
const scrollContainer = ref(null);
const timer = ref(null);

const defaultOption = {
	step: 2,
	limitMoveNum: 4,
	hoverStop: true,
	singleHeight: 280,
	openWatch: true,
	waitTime: 300,
};

const getCpuColorStyle = (usedCpu) => {
	if (usedCpu > 160) return { color: 'red' };
	if (usedCpu < 100) return { color: 'green' };
	return { color: 'yellow' };
};

const startScroll = () => {
	if (timer.value) return;
	let currentScrollTop = 0;
	let maxScrollTop = scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight;
	timer.value = setInterval(() => {
		currentScrollTop += defaultOption.step;
		if (currentScrollTop >= maxScrollTop) {
			currentScrollTop = 0;
		}
		scrollContainer.value.scrollTop = currentScrollTop;
	}, defaultOption.waitTime);
};

const stopScroll = () => {
	if (timer.value) {
		clearInterval(timer.value);
		timer.value = null;
	}
};

onMounted(() => {
	startScroll();
});

onBeforeUnmount(() => {
	stopScroll();
});
</script>

<style lang="scss" scoped>
.scroll-container {
	overflow: hidden;
	width: 100%;
	max-height: 17.5rem;
	font-size: 1rem;
	line-height: 2rem;
	margin: 0 auto;
	padding: 0.9rem;
	border-radius: 0.5rem;
	background-color: #11214e;
	border: 1px solid #5aabfb;
	box-shadow: 0 2px 1rem 0 rgba(0, 0, 0, 0.1);
}

.log-item {
	display: flex;
	border-bottom: 2px dashed #23cdd8;
	color: #bbb;
}

.item-index {
	width: 5rem;
	color: #23cdd8;
	font-size: 1rem;
	line-height: 3rem;
	font-weight: bolder;
}

.item-details {
	display: flex;
	flex-wrap: wrap;
}

.detail-field {
	width: 10rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cpu-field {
	width: 10rem;
}

.status-field {
	width: 5rem;
	align-items: flex-end;
	text-align: right;
}

.highlight {
	color: #23cdd8;
}

.text-white {
	color: #fff;
}

.cpu-value {
	font-weight: bolder;
	font-size: 1rem;
}

.reacquire-button {
	line-height: 200px;
	color: #23cdd8;
	cursor: pointer;
}
</style>
